
import {useState} from 'react'
/**
 * useState基础使用:
 *  是一个React Hook（函数）
 * 它允许我们向组件添加一个状态变量，从而控制影响组件的渲染结果
 * 
 * 本质：和普通的JS变量不同，状态变量一旦发生变化
 * 组件的视图UI也会跟着变化
 * （数据驱动视图）   =>    Vue中的双向绑定,响应式数据
 * 
 */


//示例：使用一个计数器按钮来实现增加和减小


function App() {
  /**
   * 1.调用useState添加一个状态变量
   * count 状态变量
   * setCount  修改状态变量的方法
   */
  const [count,setCount] = useState(0)

  const incremCount = ()=>{
    /**
     * 修改对象状态：
     *  规则：对于对象类型的状态变量，应该时钟床给set方法一个全新的对象来进行修改
     *      使用原来的对象会报错，比如setCount()传入参数为count++或者++count(--相同)
     */
    setCount(count+1)
  }

  const decremCount = ()=>{
    setCount(count-1)
  }

  const [form,setForm] = useState({name:"jack"})


  const changeName = ()=>{
    setForm({
      ...form,    //将form类打开，不需要修改的值
      name: "john"     //修改需要修改的值
    })
  }



  return (
    <div className="App">


      {/**  修改值 */}
      <button onClick={incremCount}>+</button>{count}<button onClick={decremCount}>-</button>
      <br/>

      {/**  修改类对象 */}
      <button onClick={changeName}>{form.name}</button>

    </div>
  );
}

export default App;
